<template>
	<view class="conterBox">
		<!-- tab栏 -->
		<view class="tab">
			<!-- 选项卡类别列表 -->
			<view class="tab-item" v-for=" (item,index) in category" :key="index" :class="{'active':isActive==index}"
				@click="chenked(item,index)">
				{{item.name}}
			</view>
			<view class="tabRightIcon">
				<image src="../../static/codeImg/leicode.png" mode="widthFix" class="iconImage"></image>
				<image src="../../static/codeImg/bigj.png" mode="widthFix" class="iconImage"></image>
			</view>
		</view>
		<!-- 选项卡内容 -->
		<view class="conterBottom">
			<view class="newInfo backlinear">
				<view class="infoHead">
					<span>最新资讯</span> <span>查看更多 <image src="../../static/codeImg/right.png" mode="widthFix"
							class="iconImage"></image> </span>
				</view>
				<view class="infoHead" v-for="(item,index) in realTimeInfoList" :key="index" @click="geinaviInfo(item)">
					<image src="../../static/codeImg/Point.png" mode="widthFix" class="iconImage"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="realTimeInfo disJFA" v-for="(item,index) in realTimeInfoData" :key="index"
				@click="geinaviInfo(item)">
				<view class="realTimeLeft">
					<view class="realLeftTop">
						{{item.title}}
					</view>
					<view class="realLeftBot disJFA">
						<view>项目介绍</view>
						<view>
							<image src="../../static/codeImg/eye.png" mode="widthFix" class="realIcon"></image>
							<span>{{item.number}}</span>
						</view>
						<view>
							<image src="../../static/codeImg/share.png" mode="widthFix" class="realIcon"></image>
							<span>分享</span>
						</view>
					</view>
				</view>
				<view class="realTimeRight">
					<image :src="globalDataApi+item.image" mode="widthFix" class="WH1"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 注册组件
		components: {

		},
		data() {
			return {
				globalDataApi: 'http://zysj.oss-cn-guangzhou.aliyuncs.com',
				// tab
				category: [],
				isActive: 0,
				index: 0,
				currentindex: 0,
				page:1,
				realTimeInfoList:[],
				realTimeInfoData: []
			}
		},
		onLoad() {
			this.getInit()
			this.getproper()
		},
		methods: {
			getInit() {
				this.$api('api/properties/newsCate', 'GET').then(res => {
					let all = {
						id: "00",
						name: "全部",
						add_time: "2024-08-23 22:17:50",
						edit_time: "2024-08-23 22:17:50",
					}
					this.category = [all, ...res.data]
					console.log("sunNum", this.category)
				})
			},
			getproper(id) {
				let date = {
					page: this.page,
					cate_id: id
				}
				if (id == "00" || id == undefined) {
					date = {
						page: this.page,

					}
				}
				this.$api('api/properties/news', 'GET', date).then(res => {
					this.realTimeInfoList=res.data.news1
					this.realTimeInfoData=res.data.news2.data
					console.log("res----------", res.data.data)
				})
			},
			chenked(item,index) {
				console.log("点击数据", index);
				this.isActive = index;
				this.getproper(item.id)
			},
			geinaviInfo(e) {
				console.log("--------------------", e.id);
				uni.navigateTo({
					url: `/pages/mySubPack/infodetails/infodetails?id=${e.id}`
				});
			}
		}
	}
</script>

<style>
	.conterBox {
		width: 750rpx;
		margin: 0;
		padding: 0;
	}

	.disJFA {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		align-items: center;
	}

	.WH1 {
		width: 100%;
		height: 100%;
	}

	.mtmr {
		margin-top: 5rpx;
		margin-right: 5rpx;
	}

	.tab {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: center;
	}

	.iconImage {
		width: 25rpx;
		height: 23rpx;
	}

	.iconImage:nth-child(2) {
		margin-left: 30rpx;
	}

	.tabRightIcon {
		width: 100rpx;
	}

	.tab-item {
		width: 128rpx;
		height: 38rpx;
		line-height: 38rpx;
		text-align: center;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		border: 2rpx solid #F4F4F4;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #575555;
		font-style: normal;
		text-transform: none;
	}

	.active {
		color: #EC622A;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		border: 2rpx solid #EC622A;
	}

	.conterBottom {
		width: 100%;
		height: 100vh;
		padding-top: 20rpx;
		box-sizing: border-box;
		background-color: #F6F6F6;
	}

	.newInfo {
		width: 702rpx;
		/* height: 262rpx; */
		margin: 0 auto;
		padding-top: 30rpx;
		padding-bottom: 22rpx;
		box-sizing: border-box;

	}

	.backlinear {
		background: linear-gradient(180deg, #FFD0CC 0%, #FFFFFF 100%);
	}

	.backInfo {
		background: #FFFFFF;
	}

	.infoHead {
		width: 670rpx;
		margin: 0 auto 15rpx;
		white-space: nowrap; //不换行
		overflow: hidden; //超出部分隐藏
		text-overflow: ellipsis; //文本溢出显示省略号
	}

	.infoHead span {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #191816;
		line-height: 0rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.infoHead span:first-child {
		margin-left: 20rpx;
	}

	.infoHead span:last-child {
		float: right;
		/* margin-top: 15rpx; */
		font-size: 26rpx;
		color: #AAAAAA;
	}

	.infoHead text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #302E2C;
		font-style: normal;
		text-transform: none;
	}

	.realTimeInfo {
		width: 702rpx;
		height: 190rpx;
		margin: 20rpx auto 0;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.realTimeLeft {
		width: 65%;

	}

	.realTimeRight {
		width: 35%;
		height: 100%;
	}

	.realLeftTop {
		width: 402rpx;
		margin: 26rpx auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #302E2C;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.realLeftBot {
		width: 402rpx;
		line-height: 34rpx;
		margin: 0 auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8B8B8B;
		/* text-align: left; */
		font-style: normal;
		text-transform: none;
	}

	.realLeftBot view:first-child {
		color: #FF5500;
	}

	.realIcon {
		width: 30rpx;
		height: 22rpx;
	}
</style>
